<template>
  <div class="STProduct">
    <!-- 查询的表单 -->
    <template :data="stuData">
    <el-form :inline="true" :model="formInline" class="demo-form-inline" style="line-height: 40px">
      <!-- 搜索姓名 -->
      <el-form-item label="" style="width: 200px">
        <el-input v-model="searchValue" clearable placeholder="请输入姓名，如果不更新，请选择右侧按钮"></el-input>
      </el-form-item>
      
      <el-form-item>
        <!-- 搜索按钮 -->
        <el-button type="primary" @click="searchname" style="margin-left: 50px">
          <i class="iconfont icon-kaoqin"></i>
        </el-button>&nbsp;
        <!-- 添加项目 -->
        <el-button type="primary" @click="addStu" style="margin-left: 10px">
          添加项目
        </el-button>
      </el-form-item>
      <br />
      <!-- 选择班级 -->
      <el-form-item label="选择班级:">
        <el-select  filterable
            clearable
            remote
            reserve-keyword
            v-model="select" 
            placeholder="请选择">
             <el-option v-for="(item,i) in ClassList"
              :key="i"
              :label="item.name"
              :value="item">
             </el-option>
        </el-select>
      </el-form-item>
    </el-form>
    </template>
    <!-- 导出项目 -->
     
      <el-button  icon="iconfont icon-excel" @click="exportExcel" style="margin:0; padding:0">
            导出excel
     </el-button>
    
    <!-- 表单 -->
    <el-table v-loading="loading" :data="stuData" border style="width: 100%">
      <el-table-column align="center" fixed prop="date" label="头像" width="150">
          <template v-slot="{ row: {headimgurl} }">
               <el-avatar size="large" shape="square"
                      :src="headimgurl ? headimgurl : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'">
                </el-avatar>
          </template>
      </el-table-column>
      <el-table-column  prop="name" label="姓名" align="center"> </el-table-column>
      <el-table-column align="center" prop="degree" label="学历" width="150">
      </el-table-column>
      <el-table-column align="center" prop="class" label="班级" width="120"> </el-table-column>
      <el-table-column align="center" prop="productUrl" label="项目" width="250">
      </el-table-column>
      <el-table-column align="center" prop="cTime" label="创建时间" width="200">
      </el-table-column>
      <el-table-column align="center" label="操作" width="270">
        <template v-slot="{ row }">
          <el-button @click="kan(row)" type="primary" size="mini" icon="el-icon-view">查看</el-button>
          <el-button type="primary" size="mini" icon="el-icon-edit" @click="edit(row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="delStu(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹出框 -->
  <Dialog ref="stuDialog" :visible="visible" @ok="ok" @cancel="cancel"></Dialog>
    <!-- 分页 -->
    <el-pagination hide-on-single-page @current-change="pageChange" background layout="prev, pager, next" :total="total" :pageSize="pageSize">
    </el-pagination>
  </div>
</template>

<script>
import Dialog from "@/components/Dialog"
import * as api from "@/api/stu"
import qee from "qf-export-excel"
export default {
  meta:{
     title: 'xyxmgl',
     name:"学员项目管理",
     icon:"iconfont icon-shangpinguanli"
    },
    components:{
      Dialog
    },
  data() {
    return {
      loading:false,
      stuData:[],
      visible: false,
      total:0,
      select:"",//班级
      pageSize:0,
      formInline: {
        user: "",
        region: "",
      },
      ruleForm: {},
      searchValue:"",
      ClassList:[],//班级列表
      classes:"",//班级
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    searchname() {
      let key=this.searchValue
      console.log(this.searchValue)
      api.searchname(key)
      .then(res=>{
        console.log(res)
        this.stuData=res.data.data
      })
    },
    kan(row){
      this.$router.push({path:"/studentManager/studentprofile",query:{row}})
    },
    addStu(){
      // 清空dialog中的数据
      this.$refs.stuDialog.stuForm={};
      this.$refs.stuDialog.title="增加学员信息"
      this.visible=true;
    },
    cancel() {
      this.visible=false
    },
    ok(formInfo){

      let dialogTitle=this.$refs.stuDialog.title;
      if(dialogTitle==="增加学员信息"){
        api.addStu(formInfo)
        .then(res=>{
          if(res.data.state){
            // 添加成功
            this.$message.success("添加成功")
            // 更新列表
            this.getStuList()
          }
        })
      }else if(dialogTitle==="编辑学员信息"){
        // 发送编辑请求
        api.editStuApi(formInfo)
        .then(res=>{
          console.log(res)
          if(res.data.state){
              this.getStuList()
              this.$message.success("更新成功")
          }
        })
      }
      
      this.visible=false
    },
    //获取学员列表数据的方法
    getStuList(count=8,page=1,classes){
    this.loading=true;
    classes=this.classes
     api.getStuListApi(count,page,classes)
     .then(res=>{
        console.log(res)
        if(res.data.state){
          console.log(res.data.data)
          this.stuData=res.data.data;
          this.loading=false;
          this.total=res.data.total;
          this.pageSize=count;
        }
     })

    },
    // 获取班级列表
    getClassesApi(){
      api.classList()
      .then(res=>{
        this.ClassList=res.data.data
        console.log(res)
      })
    },
    edit(row){
      console.log(this.$refs.stuDialog)
      // 回显
      this.$refs.stuDialog.stuForm = { ...row };
      this.$refs.stuDialog.title="编辑学员信息"
      this.visible=true;
    },
    delStu(row){
      this.$confirm('该操作将永久删除数据,是否继续?', '删除提示')
        .then(()=>{
          api.deleteStu(row.sId)
          .then(res=>{
            if(res.data.state){
              this.$message.success('删除成功')
              this.getStuList()
            }
          })
          .catch(()=>{
            this.$message.error('已取消删除')
          })
      })
    },
    pageChange(pageSize){
      this.getStuList(undefined,pageSize)
    },
    exportExcel(){
    // 导出的字段有哪些
    let titleList=[{
      title:'头像地址',
      key:"headimgurl"
    },
    {
      title:'名字',
      key:"name"
    },
    {
      title:"项目",
      key:"productUrl"
    },
    ]
    qee(titleList,this.stuData,"项目")
  },
  },
  created(){
    //获取表格数据
    this.getStuList()
    this.searchname(),
    this.getClassesApi()
  },
  
  watch:{//监听事件 
    // searchValue(){//搜索框内容改变 获取数据 要求事件为点击事件所以没有用到
    //   this.searchname()
    // },
    select(){//选择框内容改变  获取表格列表
      this.classes=this.select
      this.getStuList()
    }
  }
  
};
</script>

<style scoped lang="less">
/deep/.el-form--inline .el-form-item {
  line-height: 40px;
}
/deep/.demo-form-inline {
  text-align: left;
}
/deep/.el-form-item__label {
  padding: 0;
}
/deep/.el-input__inner {
  width: 260px;
}
/deep/tr{
  line-height:40px;
}


</style>